<template>
  <div class="image_list">
    <div class="item_box" v-for="item in props.baseList" :key="item.id" @click="chooseMaterial(item)">
      <el-image :class="{icon_radar:item?.is_radar==1}" :src="item.qr_code_link" fit="cover" class="qr_code_image">
        <template #error>
          <el-image src="/static/file/pic.png"></el-image>
        </template>
      </el-image>
      <div class="luck_name" :title="item.activity_name">{{ item.activity_name }}</div>
      <div class="icon_box">
        <img v-if="item.isCheck" src="@/assets/image/friendcirclemat/image_choose.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { luckcyInfo } from '@/api/common'
  import { getSetionId } from '@/utils/utils'
  // const props = defineProps(['baseList', 'remainNum', 'selectBaseList'])

  interface PropsType {
    baseList?: any[],
    selectBaseList?: any[],
    remainNum?: (string | number),
    multiple?: boolean,
    totalNum: number
  }
  const props = withDefaults(defineProps<PropsType>(), {
    baseList: ()=>[],
    selectBaseList: ()=>[],
    remainNum: 0,
    multiple: true,
    totalNum: 9
  })

  const emit = defineEmits(['getData'])
  const chooseMaterial = (item: any) => {
    let indx = props.selectBaseList.findIndex((it: any) => it.id === item.id)
    let deleteItem = null
    if(props.multiple){
      if (indx === -1) {
        if (props.remainNum <= 0) {
          // ElMessage.error(`最多可选${props.selectBaseList.length}个素材`)
          ElMessage.error(`最多可选${props.totalNum}个素材`);
          return
        }
        item.isCheck = true
        props.selectBaseList.push(item)
      } else {
        deleteItem = item
        props.selectBaseList.splice(indx, 1)
        item.isCheck = false
      }
    }else{
      if (indx === -1) {
        props.baseList.forEach(ite=>{
          ite.isCheck = false
        })
        item.isCheck = true
        props.selectBaseList.splice(0)
        props.selectBaseList.push(item)
      } else {
        item.isCheck = false
        props.selectBaseList.splice(0)
      }
    }
    emit('getData', {
      deleteItem,
      id: '8',
      type: 6,
      typeStr: 'luckcy',
      data: props.selectBaseList
    })
  }
  
  const getLuckInfo = async (id: number) => {
    return await luckcyInfo({ id })
  }
</script>

<style lang="scss" scoped>
  .image_list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .item_box {
      width: 100px;
      height: 120px;
      margin-right: 11px;
      margin-bottom: 12px;
      position: relative;

      .qr_code_image {
        width: 100px;
        height: 100px;
      }
      .luck_name {
        width: 100px;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .icon_box {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 6px;
        left: 6px;
        background: white;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          position: absolute;
        }
      }
    }
    .icon_radar{
      position: relative;
      &::after{
        content: '';
        width: 20px;
        height: 20px;
        background: url('@/assets/image/material/radar_red.png') no-repeat center;
        background-size: cover;
        position: absolute;
        top: 3px;
        right: 3px;
      }
  }
    .item_box:nth-child(5n) {
      margin-right: 0;
    }
  }
</style>
